<template>
	<div class="main">
		<div class="main_top">
			<div style="padding: 1.25rem;font-size: 1.1875rem;font-weight: 600;">考试大厅</div>
			<div style="padding: 1.25rem;display: flex;margin-left: 5%;margin-right: 5%;">
				<div class="left" @click="$router.push({path:'/testList',query:{id:1}})">
					<div class="title">考试中心</div>
					<div class="info">在线真题考试</div>
					<!-- <img src="https://all.meedu.tech/img/test.07e463ca.png" class="icon" /> -->
				</div>
				<div class="right">
					<div class="small-model" @click="ChangeItem()">
						<div class="title">模拟考试</div>
						<div class="info">模拟卷考试</div>
						<!-- <img src="https://all.meedu.tech/img/virtual-test.2df6236a.png" class="icon" /> -->
					</div>
					<div class="small-model wrongbook" @click="WrongQuestion()">
						<div class="title">考试错题本</div>
						<div class="info">所有考试错题都在这里</div>
						<!-- <img src="https://all.meedu.tech/img/virtual-test.2df6236a.png" class="icon" /> -->
					</div>
				</div>
			</div>
		</div>
		<div class="main_top" style="margin-top: 1.25rem;">
			<div style="padding: 1.25rem;font-size: 1.1875rem;font-weight: 600;">强化练习</div>
			<div style="padding: 1.25rem;display: flex;margin-left: 5%;margin-right: 5%;">
				<div class="small-model practice" @click="$router.push({path:'/testList',query:{id:3}})">
					<div class="title">强化练习</div>
					<div class="info">一边练习一边对答案</div>
					<!-- <img src="https://all.meedu.tech/img/practice.20167ae2.png" class="icon" /> -->
				</div>
				<div class="small-model collect" @click="$router.push('/collection')">
					<div class="title">收藏习题</div>
					<div class="info">收藏练习题随时巩固</div>
					<!-- <img src="https://all.meedu.tech/img/collect-paper.805b6c14.png" class="icon" /> -->
				</div>
			</div>
		</div>
		<!-- 	<div class="main_top" style="margin-top: 1.25rem;">
			<div style="padding: 1.25rem;font-size: 1.1875rem;font-weight: 600;">试题库</div>
			<div style="padding: 1.25rem;display: flex;margin-left: 5%;margin-right: 5%;">
				<div class="normal-model questionbank">
					<div class="title">试题库</div>
					<div class="info">海量试题全部练习</div> -->
		<!-- <img src="https://all.meedu.tech/img/storehouse.e5533a8c.png" class="icon" /> -->
		<!-- 		</div>
			</div>
		</div> -->

	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			WrongQuestion() {
				this.$router.push('/WrongQuestion');
			},
			ChangeItem()
			{
				alert('待开发');
			}

		}

	}
</script>

<style scoped="scoped">
	.main {
		height: 100vh;
		width: 90%;
		margin-right: 5%;
		margin-left: 5%;
	}

	.main_top {
		margin-top: 1.25rem;
		background-color: white;
		/* height: 18.75rem; */
		border-radius: 8px;

	}

	.left {
		width: 50%;
		height: 370px;
		background: linear-gradient(315deg, #33baf7, #1784ed);
		border-radius: 8px;
		cursor: pointer;
		margin-right: 30px;
		position: relative;
		padding: 0 30px;
		box-sizing: border-box;

	}

	.title {
		margin-top: 26px;
		width: 100%;
		height: 33px;
		font-size: 24px;
		font-weight: 600;
		color: #fff;
		line-height: 33px;
		letter-spacing: 1px;
	}

	.info {
		width: 100%;
		height: 22px;
		font-size: 16px;
		font-weight: 500;
		color: #fff;
		line-height: 22px;
		margin-top: 20px;
	}

	.icon {
		width: 100px;
		height: 100px;
		position: absolute;
		top: 30px;
		right: 50px;
	}

	.right {
		width: 50%;
		height: 400px;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.small-model {
		background: linear-gradient(135deg, #00baa6, #00baa6 0, #00dbcf);
		margin-bottom: 30px;
		width: 100%;
		height: 185px;
		border-radius: 8px;
		cursor: pointer;
		position: relative;
		padding: 0 30px;
		box-sizing: border-box;
	}

	.wrongbook {

		background: linear-gradient(315deg, #ff7474, #ff4040);
	}

	.practice {
		width: 50%;
		background: linear-gradient(315deg, #f7b433, #ed8917);
		margin-right: 30px;
	}

	.collect {
		width: 50%;
		background: linear-gradient(270deg, #c48df1, #9254de);
	}

	.normal-model {
		width: 100%;
		height: 180px;
		border-radius: 8px;
		cursor: pointer;
		position: relative;
		padding: 0 30px;
		box-sizing: border-box;
		background: linear-gradient(90deg, #ff4c72, #ff9996);
	}
</style>
